<template>
    <footer>
        <div class="icon_wrap" @click="handleClickSettings">
            <n-icon :size="22" color="#fff">
                <SettingsSharp />
            </n-icon>
        </div>
    </footer>
</template>

<script setup lang='ts' name="HomeNavFooter">
import { SettingsSharp } from '@vicons/ionicons5';
import { useRouter } from 'vue-router';
const router = useRouter();
const handleClickSettings = () => {
    router.push({
        path: '/settingList'
    })
}
</script>
<style scoped lang='scss'>
footer {
    display: flex;
    align-items: flex-end;
    height: 100%;
    width: 100%;
    justify-content: center;
    padding: 1em 0;
    cursor: pointer;

    .icon_wrap {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 6px;
        transition: .37s all;

        &:hover {
            @include useTheme {
                background: getVar('navBg');
            }
        }

        &.active {
            @include useTheme {
                background: getVar('navBg');
            }

            i {
                color: #4090EF;
            }
        }

        i {
            color: #fff;
        }
    }
}
</style>